<template>
	<view>
		<view class="top-nav">
			<!-- <image src="/static/icon/tjbj.png" mode=""></image> -->
			<view class="top-title">
				<view class="circle">
					<view class="inside"></view>
				</view>
				<text class="title-text">数据概览</text>
			</view>
			<view class="top-content">
				<view class="content-item">
					<view v-if="ticketCount['工单数量']" style="color: #F2FF63;" class="item-num">{{ticketCount['工单数量']}}</view>
					<view v-else style="color: #F2FF63;" class="item-num">0</view>
					<view class="item-text">未开始</view>
				</view>
				<view class="content-item">
					<view v-if="ticketCount['已完成']" style="color: #10EA15;" class="item-num">{{ticketCount['已完成']}}</view>
					<view v-else style="color: #10EA15;" class="item-num">0</view>
					<view class="item-text">进行中</view>
				</view>
				<view class="content-item">
					<view v-if="ticketCount['处理中']" style="color: #FCC25E;" class="item-num">{{ticketCount['处理中']}}</view>
					<view v-else style="color: #FCC25E;" class="item-num">0</view>
					<view class="item-text">已超时</view>
				</view>
				<view class="content-item">
					<view v-if="ticketCount['待处理']" style="color: #FF9138;" class="item-num">{{ticketCount['待处理']}}</view>
					<view v-else style="color: #FF9138;" class="item-num">0</view>
					<view class="item-text">正常完成</view>
				</view>
				<view class="content-item">
					<view v-if="ticketCount['已废弃']" style="color: #494949;" class="item-num">{{ticketCount['已废弃']}}</view>
					<view v-else style="color: #494949;" class="item-num">0</view>
					<view class="item-text">超时完成</view>
				</view>
				<view class="content-item">
					<view v-if="ticketCount['已废弃']" style="color: #494949;" class="item-num">{{ticketCount['已废弃']}}</view>
					<view v-else style="color: #494949;" class="item-num">0</view>
					<view class="item-text">已废弃</view>
				</view>
				<view class="content-item">
					<!-- <view class="item-num">12</view>
					<view>已废弃</view> -->
				</view>
			</view>
		</view>
		<view class="table-title">
			成员任务详情
		</view>
		<wyb-table ref="table" :headers="headers" :contents="contents" :sort-ways="sortWays" />
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	export default {
		components: {
			wybTable
		},
		data() {
			return {
				headers: [{
				    label: '姓名',
				    key: '姓名'
				}, {
				    label: '总任务数',
				    key: '总任务数'
				}, {
				    label: '待完成',
				    key: '待完成'
				}, {
				    label: '正常完成',
				    key: '正常完成'
				}, {
				    label: '超时完成',
				    key: '超时完成'
				}, {
				    label: '及时完成率',
				    key: '及时完成率'
				}],
				sortWays: ['inv', 'none', 'asc'],
				contents: [{
					id: 1,
					姓名: '张小龙',
					总任务数: 10,
					待完成: 0,
					正常完成: 10,
					超时完成: 0,
					及时完成率: '100%'
				},
				{
					id: 2,
					姓名: '张小龙',
					总任务数: 10,
					待完成: 0,
					正常完成: 10,
					超时完成: 0,
					及时完成率: '100%'
				}],
			};
		}
	}
</script>

<style lang="scss" scoped>
	.table-title {
		height: 90rpx;
		background-color: #fff;
		border-top: 10rpx solid #f5f6f7;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		&:before {
			content: "";
			display: inline-block;
			position: relative;
			top: 4rpx;
			left: 0px;
			width: 16rpx;
			height: 16rpx;
			box-sizing: content-box;
			border: 8rpx solid #1152FC;
			border-radius: 50%;
			background-color: #fff;
			margin-right: 6rpx;
		}
	}
.top-nav {
		width: 750rpx;
		height: 350rpx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
		}
		.top-title {
			position: absolute;
			top: 28rpx;
			left: 26rpx;
			display: flex;
			align-items: center;
			.circle {
				width: 16rpx;
				height: 16rpx;
				box-sizing: content-box;
				border: 8rpx solid #1152FC;
				border-radius: 50%;
				background-color: #fff;
				margin-right: 8rpx;
			}
			.title-text {
				// color: #fff;
				font-size: 32rpx;
				margin-right: 140rpx;
			}
			.label {
				// color: #fff;
			}
			.switch-icon {
				margin-left: 20rpx;
				// color: #fff;
				width: 6em;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.jt {
				position: relative;
				top: -3rpx;
				width: 20rpx;
				height: 20rpx;
				display: inline-block;
				border-top: 2rpx solid #fff;
				border-right: 2rpx solid #fff;
				transform: rotate(135deg);
			}
		}
		.top-content {
			position: absolute;
			height: 340rpx;
			bottom: -100rpx;
			left: 0;
			right: 0;
			// background-color: pink;
			display: flex;
			//flex: 33.3%;
			flex-wrap: wrap;
			.content-item {
				flex: 33.33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				// padding-left: 74rpx;
				.item-num {
					font-size: 40rpx;
				}
				.item-text {
					font-size: 24rpx;
					// color: #fff;
				}
			}
		}
	}
</style>
